<script setup>
import { PHONE_REGEXP } from '@/utils/regExp'
import { queryOrgDetail } from '@/api/system/organization'

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  parentId: {
    type: String,
    default: '0'
  },
  orgType: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:visible', 'create', 'update'])
const formRef = ref()
const formData = reactive({
  name: '',
  linkPerson: '',
  linkPhone: '',
  type: '',
  status: 0,
  showOrder: ''
})
const formRules = reactive({
  name: [{ required: true, trigger: 'blur', message: '请输入组织名称！' }],
  linkPhone: [{ pattern: PHONE_REGEXP, trigger: ['blur', 'change'], message: '请输入正确的手机号码' }]
  // showOrder: [{ max: 100, trigger: 'blur', message: '请输入1～100的值' }]
})
const options = [
  {
    value: 1,
    label: '机构'
  },
  {
    value: 2,
    label: '部门'
  }
]
const handleCreate = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      submitBtnLoading.value = true
      const { id, parentId } = props
      if (!id) {
        const param = {
          name: formData.name,
          type: formData.type,
          showOrder: formData.showOrder,
          status: formData.status,
          parentId,
          linkPerson: formData.linkPerson,
          linkPhone: formData.linkPhone
        }
        emit('create', param)
      } else {
        emit('update', formData)
      }
    } else {
      return false
    }
  })
}
const resetForm = () => {
  emit('update:visible')
  formRef.value.resetFields()
}
const submitBtnLoading = ref(false)
const editLoading = ref(false)
watch(
  () => props.visible,
  async (newValue, oldValue) => {
    if (newValue) {
      submitBtnLoading.value = false
      const { id, parentId } = props
      if (id) {
        editLoading.value = true
        const { data } = await queryOrgDetail(id)
        Object.assign(formData, data)
        editLoading.value = false
      } else {
        formData.parentId = parentId
      }
    }
  }
)
defineExpose({
  submitBtnLoading
})
</script>

<template>
  <el-dialog :close-on-click-modal="false" v-model="visible" :title="id ? '修改组织' : '新增组织'" @close="resetForm" width="60%">
    <el-form v-loading="editLoading" ref="formRef" :model="formData" :rules="formRules" label-width="80px">
      <div class="flex flex-wrap">
        <div class="w-1/2 px-4">
          <el-form-item prop="name" label="组织名称">
            <el-input v-model="formData.name" placeholder="请输入组织名称" maxlength="50" />
          </el-form-item>
        </div>
        <div class="w-1/2 px-4">
          <el-form-item prop="type" label="组织类型">
            <el-select v-model="formData.type" placeholder="请选择组织类型">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="flex flex-wrap">
        <div class="w-1/2 px-4">
          <el-form-item prop="linkPerson" label="联系人">
            <el-input v-model="formData.linkPerson" placeholder="请输入联系人" maxlength="10" />
          </el-form-item>
        </div>
        <div class="w-1/2 px-4">
          <el-form-item prop="linkPhone" label="联系电话">
            <el-input v-model="formData.linkPhone" placeholder="请选择联系电话" clearable maxlength="20"  />
          </el-form-item>
        </div>
      </div>
      <div class="flex flex-wrap">
        <div class="w-1/2 px-4">
          <el-form-item prop="showOrder" label="显示顺序">
            <el-input-number v-model.number="formData.showOrder" :min="1" :max="100" />
          </el-form-item>
        </div>
        <div class="w-1/2 px-4">
          <el-form-item prop="status" label="状态">
            <el-radio-group v-model="formData.status" class="ml-4">
              <el-radio :label="0">启用</el-radio>
              <el-radio :label="1">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :loading="submitBtnLoading" @click="handleCreate">确认</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
